<template>
  <div class="home">
    <div class="head">
      <img class="head-logo"
           src="http://180.101.226.58:8100/newproject/img/est/logo.png" alt="">
      <div>
        <span class="iconfont icon-sousuo"></span>
        <span class="iconfont icon-wo"></span>
        <span class="iconfont icon-ziyuan"></span>
      </div>
    </div>
    <card :header="{title: '告警信息: ' + alarmText}">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-r">
          <span>{{yesterdayElectric}}</span>
          <br/>
          昨日电费(元)
        </div>
        <div>
          <span>0.00</span>
          <br/>
          昨日可节省电费(元)
        </div>
      </div>
    </card>
    <div id="container" style="width: 100%;height:280px;"></div>
    <div class="cloud">
    <router-link tag="div" to="/scadamonitor"  class="cloud-panel" style="border-top: 1px solid #e5e5e5;">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/3f060ca44c331bee71c463414a85d731.svg" alt="">
      <div class="cloud-text">监控</div>
      <span class="iconfont icon-fanhui"></span>
    </router-link>
    <router-link tag="div" to="/alarmlist" class="cloud-panel">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/e08ffe51a3f144b412b0588bc3fd2f45.svg" alt="">
      <div class="cloud-text">告警</div>
      <span class="iconfont icon-fanhui"></span>
    </router-link>
    <router-link tag="div" to="/energy" class="cloud-panel">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/edfa8ece256dad28fff0b1154aeb098f.svg" alt="">
      <div class="cloud-text">能耗</div>
      <span class="iconfont icon-fanhui"></span>
    </router-link>
    <router-link tag="div" to="/record" class="cloud-panel">
      <img class="panel-icon" src="https://main.qcloudimg.com/raw/6b59f8db9c981e536d61c3620fee2b83.svg" alt="">
      <div class="cloud-text">档案</div>
      <span class="iconfont icon-fanhui"></span>
    </router-link>
  </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      alarmText: '无',
      yesterdayElectric: ''
    }
  },
  methods: {
    init () {
      /* eslint-disable */
      var option = {
        title: {
          text: '日负荷曲线(kW)',
          textStyle: {
            fontSize: 13
          }
          // left: 'center'
        },
        grid:{
              // x:'5%',
              y:'13%',
              x2:'5%',
              y2:'10%'
          },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross'
        //   },
        //   textStyle: {
        //     align: 'left'
        //   }
        // },
        legend: {
          // left: 'left',
          itemWidth: 35,// 标志图形的长度
          itemHeight: 10,
          data: ['今日', '昨日'],
          textStyle: {
            fontSize: 12
          }
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     magicType: {type: ['line', 'bar']},
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // name: 'x',
          // splitLine: {show: false},
          // axisLabel: { interval: 11 },
          data: []
        },
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        yAxis: {
          type: 'value',
          // scale: true,
          // axisLabel: {
          //   formatter: '{value}kW'
          // }
        },
        series: [{
          name: '今日',
          type: 'line',
          data: [],
          connectNulls: true,
          lineStyle: {
            normal: {}
          },
          //data:[11, 11, 15, 13, 12, 13, 10],
          // markPoint: {
          //   data: [
          //     {type: 'max', name: '最大值'},
          //     {type: 'min', name: '最小值'}
          //   ],
          //   symbolSize: 30
          // }
        },
          {
            name: '昨日',
            type: 'line',
            // smooth: true,
            connectNulls: true,
            data: []
          }]
      }
      var myChart = echarts.init(document.getElementById('container'), 'light')
      var endDate=new Date();
      var startDate=new Date();
      startDate.setTime(startDate.getTime()-24*60*60*1000);
      var dateString=endDate.toISOString().substr(0,10);
      var yesDateString=startDate.toISOString().substr(0,10);
      var scadaIds=localStorage.scadaId.split(",");
      newProjectDwr.GetMulDayHisDataXText(dateString,function(result){
          var xAxisValue=result;
          var tDate=getTimeIntFromStr(dateString);
          var tTableDate=getTableTime(dateString);
          var yDate=getTimeIntFromStr(yesDateString);
          var yTableDate=getTableTime(yesDateString);
          drawDayLoadChart(tDate,tTableDate,yDate,yTableDate,xAxisValue);
      });
      function drawDayLoadChart(tDate,tTableDate,yDate,yTableDate,xAxisValue){
          var measureId=localStorage.dayLoadMeasureId;
          newProjectDwr.getHistoryAnalogValue(measureId,tDate,tTableDate,function(tResult){
              newProjectDwr.getHistoryAnalogValue(measureId,yDate,yTableDate,function(yResult){
		  var i = xAxisValue.length
		  while(i--){
		    if(i&1){
		      xAxisValue.splice(i,1)
		      tResult.splice(i,1)
		      yResult.splice(i,1)
		    }
		  }
                  option.xAxis.data=xAxisValue;
                  option.series[0].data=filterZero(tResult);
                  option.series[1].data=filterZero(yResult);
                  myChart.setOption(option);
              });
          })
      }
      newProjectDwr.getRunLogAll(dateString,dateString,scadaIds,[],'true','-1','',true,localStorage.userId,result=>{
        var length = result.length
        if(length >= 1){
          var alarmText1=result[length-1].split(",")
          this.alarmText = alarmText1[1]+" "+alarmText1[0]
          if(length > 1){
            var alarmText2=result[length-2].split(",")
            this.alarmText += " " + alarmText2[1]+" "+alarmText2[0]
          }
        }
      });
      newProjectDwr.getElectricOfUserRelationBuild(localStorage.buildId,startDate,endDate,result =>{
        this.yesterdayElectric = result.toFixed(2)
      });
      function filterZero(arr){
            var temp=[];
            for(var item in arr){
                var v=arr[item];
                if(v==0||v=="0"){
                    temp[item]="null";
                }else
                    temp[item]=v;
            }
            return temp;
        }
      function getTimeIntFromStr(ts){
            var ds = ts.split("-");
            if(ds.length!=3) return ;
            var y = ds[0];
            var m = ds[1];
            var d = ds[2];
            var date = new Date();
            date.setFullYear(+y,m-1,+d);
            return getDateInt(date);
        }
        function getDateInt(date){
            date.setHours(0,0,0,0);
            var ms = date.getTime() - date.getTimezoneOffset() * 60 * 1000;
            ms = ms/(24 * 60 * 60 * 1000) + 25569;
            return ms.toFixed(0);
        }
        function getTableTime(ts){
            var ds = ts.split("-");
            if(ds.length!=3) return ;
            return ds[0]+ds[1];
        }
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
  .icon-fanhui{
    transform: rotate(180deg);
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    right: 14px;
  }
</style>

